@import "common/var";
@import "mixins/mixins";

@include b(checkbox) {
    color: $--checkbox-font-color;
    font-weight: $--checkbox-font-weight;
    font-size: $--font-size-base;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    user-select: none;
    @include e(input) {
      white-space: nowrap;
      cursor: pointer;
      outline: none;
      display: inline-block;
      line-height: 1;
      position: relative;
      vertical-align: middle;
  
      @include when(disabled) {
        .vl-checkbox__inner {
          background-color: $--checkbox-disabled-input-fill;
          border-color: $--checkbox-disabled-border-color;
          cursor: not-allowed;
  
          &::after {
            cursor: not-allowed;
            border-color: $--checkbox-disabled-icon-color;
          }
  
          & + .vl-checkbox__label {
            cursor: not-allowed;
          }
        }
  
        &.is-checked {
          .vl-checkbox__inner {
            background-color: $--checkbox-disabled-checked-input-fill;
            border-color: $--checkbox-disabled-checked-input-border-color;
  
            &::after {
              border-color: $--checkbox-disabled-checked-icon-color;
            }
          }
        }
  
        &.is-indeterminate {
          .vl-checkbox__inner {
            background-color: $--checkbox-disabled-checked-input-fill;
            border-color: $--checkbox-disabled-checked-input-border-color;
  
            &::before {
              background-color: $--checkbox-disabled-checked-icon-color;
              border-color: $--checkbox-disabled-checked-icon-color;
            }
          }
        }
  
        & + span.el-checkbox__label {
          color: $--disabled-color-base;
          cursor: not-allowed;
        }
      }
  
      @include when(checked) {
        .vl-checkbox__inner {
          background-color: $--checkbox-checked-background-color;
          border-color: $--checkbox-checked-input-border-color;
  
          &::after {
            transform: rotate(45deg) scaleY(1);
          }
        }
  
        & + .el-checkbox__label {
          color: $--checkbox-checked-font-color;
        }
      }
      @include when(focus) { /*focus时 视觉上区分*/
        .vl-checkbox__inner {
          border-color: $--checkbox-input-border-color-hover;
        }
      }
      @include when(indeterminate) {
        .vl-checkbox__inner {
          background-color: $--checkbox-checked-background-color;
          border-color: $--checkbox-checked-input-border-color;
  
          &::before {
            content: '';
            position: absolute;
            display: block;
            background-color: $--checkbox-checked-icon-color;
            height: 2px;
            transform: scale(0.5);
            left: 0;
            right: 0;
            top: 5px;
          }
  
          &::after {
            display: none;
          }
        }
      }
    }
    @include e(inner) {
      display: inline-block;
      position: relative;
      border: $--checkbox-input-border;
      border-radius: $--checkbox-border-radius;
      box-sizing: border-box;
      width: $--checkbox-input-width;
      height: $--checkbox-input-height;
      background-color: $--checkbox-background-color;
      z-index: $--index-normal;
      transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
      background-color .25s cubic-bezier(.71,-.46,.29,1.46);
  
      &:hover {
        border-color: $--checkbox-input-border-color-hover;
      }
  
      &::after {
        box-sizing: content-box;
        content: "";
        border: 1px solid $--checkbox-checked-icon-color;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }
    }
  
    @include e(original) {
      opacity: 0;
      outline: none;
      position: absolute;
      margin: 0;
      width: 0;
      height: 0;
      z-index: -1;
    }
  
    @include e(label) {
      display: inline-block;
      padding-left: 10px;
      line-height: 19px;
      font-size: $--checkbox-font-size;
    }
}